<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
    transition: opacity .2s cubic-bezier(.81, .42, .6, 1);
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
#databinding transition div{
	position:absolute;
	left: 80px;
	top: 90px;
}
</style>
</head>
<body>
	<div id = "databinding">
		<button @mouseenter="show1 = !show1" @mouseout = "show1 = !show1">点点1</button>
		<button @mouseenter="show2 = !show2" @mouseout = "show2 = !show2">点点2</button>
		<button @mouseenter="show3 = !show3" @mouseout = "show3 = !show3">点点3</button>
		<button @mouseenter="show4 = !show4" @mouseout = "show4 = !show4">点点4</button>
		<transition name = "fade">
			<div v-if = "show1" :style = "styleobj">动画实例1</div>
		</transition>
		<transition name = "fade">
			<div v-if = "show2" :style = "styleobj">动画实例2</div>
		</transition>
		<transition name = "fade">
			<div v-if = "show3" :style = "styleobj">动画实例3</div>
		</transition>
		<transition name = "fade">
			<div v-if = "show4" :style = "styleobj">动画实例4</div>
		</transition>
		<div style="width: 400px;height: 100px;background-color: aqua;">
			<input v-model="userName" type="text" name="username" placeholder="用户名" @blur="check()"><br>
			<p>{{info}}</p>
		</div>
	</div>
	
	<script type = "text/javascript">
		var vm = new Vue({
			el: '#databinding',
			data: {
				userName:"",
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				styleobj :{
					fontSize:'30px',
					color:'red',
					position: 'absolute',
					left: '50px',
					top: '50px',
				},
				info:"只能包含字母、数字",
				
			},
			methods : {
				check(){
					if(vm.userName=="")
					console.log("info:"+vm.info);
					vm.info="输入不能为空";
					console.log("info:"+vm.info);
				}
			}
		});
	</script>
</body>
</html>